/**
 * author: ywb
 * description:
 * 		一层子菜单侧边栏
 * 
 * AIP attributes:
 * 	bg_color: 				背景色的设定		默认:#545c64
 * 	font_color: 			文字颜色设定		默认:#fff
 * 	active_color: 			激活颜色设定		默认:#ffd04b
 * 
 *	menu_items:				菜单内容			默认两菜单四个菜单项
 *		[
					{
						name: ,						第一个菜单项		默认名称： 导航1
						icon: 						可选图标			默认："el-icon-location",
						sub: [						子菜单对象
							{
								name: ,				子菜单项1 		默认菜单项1-1
								href: 				子菜单项跳转地址	默认:"#1"
							},
							{
								name: ,				子菜单项2		默认菜单项1-2,
								href: 				子菜单项跳转地址	默认:"#2"
							}
						]
					},
					{
						name: "导航2",
						icon: "el-icon-s-tools",
						sub: [
							{
								name: "菜单项2-1",
								href: "#3"
							},
							{
								name: "菜单项2-2",
								href: "#4"
							}
						]
					}
				];
 *  
 */
Vue.component("aside-menu",
	{
		data(){
			return {};
		},
		methods:{
			handleOpen(key, keyPath) {
			    console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
			    console.log(key, keyPath);
			},
			//登录后菜单跳转方法
			handleSelect(key, keyPath){
				console.log(key);
				location.href=key;
			}
		},
		props:{
			bg_color: {
				type: String,
				default: "#545c64"
			},
			font_color:{
				type: String,
				default: "#fff"
			},
			active_color:{
				type: String,
				default: "#ffd04b"
			},
			menu_items: {
				type: Array,
				default: function(){
					return [
					{
						name: "导航1",
						icon: "el-icon-location",
						sub: [
							{
								name: "菜单项1-1",
								href: "#1"
							},
							{
								name: "菜单项1-2",
								href: "#2"
							}
						]
					},
					{
						name: "导航2",
						icon: "el-icon-s-tools",
						sub: [
							{
								name: "菜单项2-1",
								href: "#3"
							},
							{
								name: "菜单项2-2",
								href: "#4"
							}
						]
					}
				];
				}
			}
		},
		template:
		`<el-menu
			      default-active="2"
			      class="el-menu-vertical-demo"
			      @open="handleOpen"
			      @close="handleClose"
				  @select="handleSelect"
			      :background-color="bg_color"
			      :text-color="font_color"
			      :active-text-color="active_color">
			      <el-submenu 
					v-for="(item,mindex) in menu_items"
					:key="mindex"
					:index="mindex+1+''">
			        <template slot="title">
			          <i v-if="item.icon" :class="item.icon"></i>
			          <span>{{item.name}}</span>
			        </template>
					<el-menu-item-group>
			          <el-menu-item 
						v-for="(subItem,sindex) in item.sub" 
						:key="sindex"  
						:index="subItem.href">
						{{subItem.name}}
					  </el-menu-item>
			        </el-menu-item-group>
			      </el-submenu>
			    </el-menu>
		`
	});
